.idBoxDiv {
  position: relative;
  height: 100%;

  //头部
  .container {
    margin-right: auto;
    margin-left: auto;

    .containerBox {
      position: relative;
      z-index: 2;
      padding-top: 1rem;

      .antBreadcrumb {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        color: #000;
        font-variant: tabular-nums;
        line-height: 1.5715;
        list-style: none;
        font-feature-settings: "tnum";
        color: rgba(0, 0, 0, .85);
        font-size: 14px;

        span {
          color: var(--second-text-color) !important;

          .SlashSpan {
            margin: 0 8px;
          }
        }

        a {
          color: var(--second-text-color) !important;
        }
      }
    }
  }

  //中间部分内容
  .middleBox {
    min-height: 0px;
    background: none;

    .middleBoxTop {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;

      // 中间内容左边部分
      .middleBoxTopLeft {
        flex: 1;
        width: calc(100% - 20rem - 1rem);
        padding-top: 1rem;
        padding-bottom: 1rem;

        .middleBoxTopLeftBox {
          .middleBoxTopLeftInner {
            position: relative;
            z-index: 2;

            //左边内容头部部分
            .headerDiv {
              color: var(--main-text-color);
              font-weight: 600;
              font-size: 16px;
              line-height: 22px;
            }

            //中间部分
            main {
              background-color: var(--bg-second);
              padding: 0.8rem;
              box-shadow: var(--box-shadow);
              border-radius: var(--border-radius);

              .mainDetailTop {
                position: relative;
                z-index: 2;
                text-align: center;

                .mainDetailTopOne {
                  width: 100%;
                  border-radius: var(--border-radius);
                  margin: 1rem auto;
                  overflow: hidden;

                  img {
                    width: 100%;
                    height: 100%;
                    border-top-right-radius: var(--border-radius);
                    border-top-left-radius: var(--border-radius);
                    object-fit: cover;
                  }
                }

                .mainDetailTopTow {
                  display: flex;
                  flex: 1;
                  flex-direction: column;
                  justify-content: space-between;
                  overflow: hidden;
                  text-align: center;

                  .mainDetailTopTowPOne {
                    font-weight: 600;
                    font-size: 16px;
                    line-height: 22px;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-synthesis: style;
                  }

                  .mainDetailTopTowPTow {
                    position: relative;
                    z-index: 2;
                    text-align: center;
                    display: -webkit-box;
                    max-width: 100%;
                    margin-top: 0.8rem;
                    color: var(--second-text-color);
                    overflow: hidden;
                    font-size: 14px;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                  }

                  .mainDetailTopTowThree {
                    width: 100%;
                    margin-top: 0.4rem;
                    color: #8590a6;
                    font-size: 14px;
                    line-height: 20px;

                    .spanDian {
                      margin: 0 4px;
                    }
                  }

                  .mainDetailTopTowBottom {
                    margin-top: 0.8rem;

                    button {
                      color: #fff;
                      background: #f40a12;
                      border-color: #f40a12;
                      text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
                      box-shadow: 0 2px 0 rgb(0 0 0 / 5%);
                      outline: 0;
                      line-height: 1.5715;
                      position: relative;
                      display: inline-block;
                      font-weight: 400;
                      white-space: nowrap;
                      text-align: center;
                      background-image: none;
                      box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
                      cursor: pointer;
                      transition: all .3s cubic-bezier(.645, .045, .355, 1);
                      user-select: none;
                      touch-action: manipulation;
                      height: 32px;
                      padding: 4px 15px;
                      font-size: 14px;
                      border-radius: 2px;
                      border: 1px solid #d9d9d9;

                      span {
                        display: inline-block;
                      }
                    }
                  }
                }
              }

              >ul {
                margin-top: 2rem;
                padding: 0;
                list-style: none;
                margin: 0;

                li {
                  
                  a {
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                    height: 44px;
                    font-size: 14px;
                    line-height: 20px;
                    padding-left: 12px;
                    padding-right: 16px;
                    color: var(--main-text-color);
                  }

                  a:hover {
                    color: #f40a12;
                    text-decoration: none;
                    background-color: #ccc;
                    outline: none;
                    cursor: pointer;
                    transition: color .3s;
                    -webkit-text-decoration-skip: objects;
                    border-radius: var(--border-radius);
                  }
                }

              }
            }
          }
        }

      }

      //中间部分右边内容
      .middleBoxTopRight {
        width: 20rem;
        margin-left: 1rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
      }
    }
  }
}
